<template>
	<section style="overflow-x: hidden">
		<el-button type="primary" @click="changeTree" style="margin-top: 10px">展开/折叠</el-button>
		<section style="width:100%;display: flex">
		<section class="agent-left" v-show="treeShow">
			<el-input
					placeholder="输入关键字进行过滤"
					v-model="filterText">
			</el-input>
			<el-tree :data="data" class="filter-tree" :props="defaultProps" :expand-on-click-node="false" ref="tree2" :filter-node-method="filterNode" :highlight-current="true" :default-expand-all="true"  @node-click="handleNodeClick" :style="{'minHeight':minHeight + 'px','background':'#f2f2f2'}" ></el-tree>
		</section>
		<section class="agent-right">
			<el-col :span="rightWidth" class="toolbar" style="padding-bottom: 0px;">
				<!--<div class="agent-path">-->
					<!--<p>当前代理:</p>-->
					<!--<h3>admin></h3>-->
				<!--</div>-->
				<el-form :inline="true" >
					<el-form-item>
						<el-input v-model="agentId" placeholder="代理ID"></el-input>
					</el-form-item>
					<!--<el-form-item>-->
						<!--<el-input v-model="filters.name" placeholder="代理名字"></el-input>-->
					<!--</el-form-item>-->
					<!--<el-form-item>-->
						<!--<el-input v-model="filters.name" placeholder="联系方式"></el-input>-->
					<!--</el-form-item>-->
					<el-form-item>
						<el-button type="primary" v-on:click="getAgent(pageSize)">查询</el-button>
					</el-form-item>
					<!--<el-form-item>-->
						<!--<el-button type="primary" v-on:click="handleAdd">新增</el-button>-->
					<!--</el-form-item>-->
				</el-form>
				<!--<el-form :inline="true">-->
					<!--<el-form-item label="一级代理总收益">-->
						<!--<label>213212999999</label>-->
					<!--</el-form-item>-->
					<!--<el-form-item label="一级代理分销收益">-->
						<!--<label>213212999999</label>-->
					<!--</el-form-item>-->
					<!--<el-form-item label="一级代理团队收益">-->
						<!--<label>12123121231</label>-->
					<!--</el-form-item>-->
					<!--<el-form-item label="一级会员总人数">-->
						<!--<label>54351321</label>-->
					<!--</el-form-item>-->
					<!--<el-form-item label="一级代理数量">-->
						<!--<label>2312121321</label>-->
					<!--</el-form-item>-->
					<!--<el-form-item label="二级代理数量">-->
						<!--<label>0.99999</label>-->
					<!--</el-form-item>-->
					<!--<el-form-item label="三级代理数量">-->
						<!--<label>454545</label>-->
					<!--</el-form-item>-->
					<!--<el-form-item label="已提现金额">-->
						<!--<label>45454</label>-->
					<!--</el-form-item>-->
				<!--</el-form>-->
			</el-col>
			<!--列表-->
			<el-col :span="rightWidth">
				<el-table :data="agentList" stripe highlight-current-row v-loading="listLoading" style="width: 100%;" :default-sort = "{prop: 'id', order: 'descending'}">
				<el-table-column prop="id" label="代理ID"  width="120" fixed sortable>
				</el-table-column>
				<el-table-column prop="nickname" label="代理昵称" width="120">
				</el-table-column>
				<el-table-column prop="phone" label="手机号">
				</el-table-column>
				<el-table-column prop="qq" label="QQ" >
				</el-table-column>
				<el-table-column prop="wx" label="微信" >
				</el-table-column>
				<el-table-column prop="membercount" label="会员数量" width="100" >
					<!--<template slot-scope="scope">-->
						<!--<el-button type="text" size="small" @click="downAgent">-->
							<!--{{scope.row.age}}-->
						<!--</el-button>-->
					<!--</template>-->
				</el-table-column>
				<el-table-column prop="agentcount" label="下级代理数量" width="150" >
					<!--<template slot-scope="scope">-->
						<!--<el-button type="text" size="small" @click="downAgent">-->
							<!--{{scope.row.age}}-->
						<!--</el-button>-->
					<!--</template>-->
				</el-table-column>
				<el-table-column prop="teamtotal" label="团队总收益" width="120">
				</el-table-column>
				<el-table-column prop="teamratio" label="团队收益比例" width="150">
				</el-table-column>
				<el-table-column prop="team" label="自身团队收益" width="150">
				</el-table-column>
				<el-table-column prop="threelevel" label="三级分销获得收益" width="170">
				</el-table-column>
				<el-table-column prop="income" label="自身总收益" width="150">
				</el-table-column>
				<el-table-column prop="cancash" label="可提现额度" width="150">
				</el-table-column>
				<el-table-column prop="cashed" label="已提现金额" width="150">
				</el-table-column>
				<el-table-column prop="name" label="提现绑定信息" width="150">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="putInfo(scope.row.id)">
							提现绑定信息
						</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" min-width="300" >
					<template slot-scope="scope">
						<el-button type="danger" size="small" @click="handleEdit(scope.row)">修改</el-button>
						<el-button type="danger" size="small" @click="handleLogin(scope.row.id)">重置登录密码</el-button>
						<el-button type="danger" size="small" @click="handlePut(scope.row.id)">重置提现密码</el-button>
					</template>
				</el-table-column>
			</el-table>
			</el-col>
			<!--工具条-->
			<el-col :span="rightWidth" class="toolbar">
				<el-pagination layout="sizes, total, prev, pager, next" :page-sizes="[15, 30, 50]" @current-change="handleCurrentChange" @size-change="handleSizeChange"  :page-size="pageSize" :total="total" style="float:right;">
				</el-pagination>
			</el-col>
			<el-dialog title="修改团队总收益" v-model="editVisible" :close-on-click-modal="false">
				<el-form :model="govern" label-width="130px">
					<el-form-item label="代理ID">
						<label>{{govern.id}}</label>
					</el-form-item>
					<el-form-item label="代理昵称">
						<label>{{govern.nickname}}</label>
					</el-form-item>
					<el-form-item label="当前团队收益比例">
						<label>{{govern.teamratio}}</label>
						<template slot="append">%</template>
					</el-form-item>
					<el-form-item label="新团队收益比例">
						<el-input-number v-model="newTeam"></el-input-number>
						<span><=40%</span>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="editVisible = false">取消</el-button>
					<el-button type="primary" @click.native="editSubmit" :loading="editLoading">确定</el-button>
				</div>
			</el-dialog>
			<el-dialog title="提现绑定信息" v-model="controlVisible" :close-on-click-modal="false">
				<el-col :span="24" class="toolbar" style="padding-bottom: 0;margin-bottom: 20px">
					<el-form  :model="controlList">
						<el-form-item label="支付宝账号">
							<label>{{controlList.alipayAccount}}</label>
						</el-form-item>
						<el-form-item label="支付宝姓名">
							<label>{{controlList.alipayAccount}}</label>
						</el-form-item>
						<el-form-item label="银行卡号">
							<label>{{controlList.bankNum}}</label>
						</el-form-item>
						<el-form-item label="银行名称">
							<label>{{controlList.bankName}}</label>
						</el-form-item>
						<el-form-item label="开户行">
							<label>{{controlList.openBank}}</label>
						</el-form-item>
						<el-form-item label="持卡人姓名">
							<label>{{controlList.cardName}}</label>
						</el-form-item>
					</el-form>
				</el-col>
			</el-dialog>
		</section>
	</section>
	</section>
</template>

<script>
	import base64 from '../../api/base64'
    import ElButton from "element-ui/packages/button/src/button";

	export default {
        components: {ElButton},
        data() {
		    return{
                filterText: '',
                minHeight:'',
                treeShow:true,
				rightWidth:21,
                operateId:'',
                agentId:'',
                loginPwdVisible:false,
                tPwdVisible:false,
                loginPwd:'',
                integralPwd:'',
                editLoading:false,
                editVisible:false,
                controlVisible:false,
                listLoading:false,
				agentList:[],
                controlList:{
                    alipayAccount:'11111',
					alipayNumber:'222222',
                    bankNum:'333333',
                    bankName:'4444444',
                    openBank:'5555555',
                    cardName:'6666666'
				},
                govern:{

				},
				newTeam:'',
				total:0,
				page:1,
				pageSize:15,
                data: [],
                defaultProps: {
                    children: 'child',
                    label: 'nickname'
                }
			}
		},
        watch: {
            filterText(val) {
                this.$refs.tree2.filter(val);
            }
        },
		methods: {
            changeTree(){
                this.treeShow = !this.treeShow
				if(this.treeShow){
                    this.rightWidth = 21
				}else{
                    this.rightWidth = 24
				}
			},
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            handleNodeClick(data) {
                this.$axios.get('/agents?parentid='+data.userid+'&index='+this.page+'&size='+this.pageSize,{},this.global().token).then((res)=>{
                    if (res.status == 200){
                        this.total = res.data.count
                        let base = new base64.Base64()
                        let agent = res.data.data
                        agent.forEach((val)=>{
                            if (val.nickname){
                                val.nickname = base.decode(val.nickname)
                            }
                        })
                        this.agentList = agent
                        this.listLoading = false;
                    }else{
                        this.$message({message: res.data, type: 'error'});
                    }
                })
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.getAgent(this.pageSize);
            },
			handleCurrentChange(val) {
				this.page = val;
				this.getAgent(this.pageSize);
			},
			getTree(){
                this.$axios.get('/agent-tree',{},this.global().token).then((res)=>{
                    if(res.status == 200){
                        this.data = res.data
                    }
                })
			},
			//获取用户列表
			getAgent(page) {
				this.listLoading = true;
				this.$axios.get('/agents?userid='+this.agentId+'&index='+this.page+'&size='+page,{},this.global().token).then((res)=>{
				    if (res.status == 200){
				        this.total = res.data.count
                        let base = new base64.Base64()
						let agent = res.data.data
                        agent.forEach((val)=>{
                            if (val.nickname){
                                val.nickname = base.decode(val.nickname)
                            }
                        })
				        this.agentList = agent
                        this.listLoading = false;
					}else{
                        this.$message({message: res.data, type: 'error'});
					}
				})
			},
            tPwdSubmit(agentId){
                this.$confirm('确定重置提现密码?', '提示', {
                    //type: 'warning'
                }).then(() => {
                    this.$axios.patch('/agent/'+agentId+'/cash-password',{},this.global().token).then((res)=>{
                        if (res.status == 200){
                            this.$message({message: '重置提现密码成功', type: 'success'});
                        }else{
                            this.$message({message: res.data, type: 'error'});
                        }
                    })
                }).catch(() => {

                });
			},
            putInfo(agentId){
			    this.controlVisible = true
				this.$axios.get('/agent/'+agentId+'/accounts',{},this.global().token).then((res)=>{
				    if (res.status == 200){

					}else{
                        this.$message({message: res.data, type: 'error'});
					}
				})
			},
            handleLogin(agentId){
                this.$confirm('确定重置登录密码?', '提示', {
                    //type: 'warning'
                }).then(() => {
                    this.$axios.patch('/agent/'+agentId+'/agent-password',{},this.global().token).then((res)=>{
                        if (res.status == 200){
                            this.$message({message: '重置登录密码成功', type: 'success'});
                        }else{
                            this.$message({message: res.data, type: 'error'});
                        }
                    })
                }).catch(() => {

                });
            },
            handlePut(agentId){
                this.$confirm('确定重置提现密码?', '提示', {
                    //type: 'warning'
                }).then(() => {
                    this.$axios.patch('/agent/'+agentId+'/cash-password',{},this.global().token).then((res)=>{
                        if (res.status == 200){
                            this.$message({message: '重置提现密码成功', type: 'success'});
                        }else{
                            this.$message({message: res.data, type: 'error'});
                        }
                    })
                }).catch(() => {

                });
            },
            handleEdit(agent){
			    this.govern = agent
                this.editVisible = true
			},
            editSubmit(){
			    if (this.newTeam>40){
                    this.$message({message: '新收益不能大于40%', type: 'error'});
                    return
				}
				this.$axios.patch('/agent/'+this.govern.id+'/teamratio',{
                    teamratio:parseInt(Math.abs(this.newTeam))
				},this.global().token).then((res)=>{
                    if (res.status == 200){
                        this.editVisible = false
						this.$message({message: '修改成功', type: 'success',duration:'1500'});
                        this.getAgent(this.pageSize)
                    }else{
                        this.$message({message: res.data, type: 'error',duration:'1500'});
                    }
				})
			}
		},
		mounted() {
			this.getAgent(this.pageSize);
			this.getTree();
			this.minHeight = window.screen.height  - 300
		}
	}

</script>

<style scoped lang="stylus">
	.agent-left
		flex 0 0 200px
		margin-top: 10px
		margin-right 10px
		width:100%
	.agent-right
		flex 1
		width:100%
	.agent-path
		display flex
		padding-bottom 10px
		&>p
			padding-right 10px
		&>h3
			cursor pointer
</style>